<template>
    <div class="v-video" v-show="props.wsUrl">
        <video ref="videoEl" :class="'video-js vjs-default-skin vjs-big-play-centered video ' + _data.classname"></video>
    </div>
</template>

<script lang="ts" setup>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { nextTick, onMounted, ref, watch } from "vue";

interface IVVideo {
    id: string | number
    wsUrl?: string | null | undefined
    videoOpts?: any
    type?: string
}

const props = withDefaults(defineProps<IVVideo>(), {
    videoOpts: {
        autoplay: false,
        controls: true,
        preload: "auto",
        fluid: true,
        playbackRates: [0.5, 1, 1.5, 2],
        controlBar: {
            children: [
                "playToggle",
                "volumePanel",
                "currentTimeDisplay",
                "timeDivider",
                "durationDisplay",
                "progressControl",
                "liveDisplay",
                "seekToLive",
                "remainingTimeDisplay",
                "customControlSpacer",
                "playbackRateMenuButton",
                "chaptersButton",
                "descriptionsButton",
                "subsCapsButton",
                "audioTrackButton",
                "pictureInPictureToggle",
                "fullscreenToggle",
            ],
        }
    }
});
const data = () => {
    return {
        classname: `video-${props.id}`,
        videoEl: ref<HTMLVideoElement>(null),
        videoPlayer: ref(null),
    }
}
const _data = data();
onMounted(() => {
    setTimeout(() => {
        _data.videoEl.value = document.querySelector(`.${_data.classname}`);
        _data.videoPlayer.value = videojs(_data.videoEl.value, props.videoOpts, () => {
            console.log('videojs ready !')
        })
    }, 100);
})
watch(() => props.wsUrl, (newVal) => {
    _data.videoPlayer.value.src({
        src: newVal,
        type: props.type || "video/mp4",
    });
})
</script>

<style scoped lang="less">
.v-video {
    width: 100%;
    height: 100%;

    .video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        padding: 0;
        margin: 0;
    }
}
</style>